<template>
  <li class="todo">
    <div class="view">
      <span class="index">{{ index + 1 }}.</span>
      <!-- <input type="checkbox"> -->
      <label>{{ item }}</label>
      <button class="destroy" @click="remove(index)"></button>

    </div>
  </li>
</template>

<script>
import pubsub from 'pubsub-js';
export default {
  name: "MyItem",
  props: ["item", "index",'removetodo'],
  methods: {
    remove(index) {
      // this.$bus.$emit('removetodo',index);
      pubsub.publish('removetodo',index)
    }
  },
};
</script>

<style >

.destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}

.destroy:hover {
  color: #af5b5e;
}

.destroy:after {
  content: "×";
}

li:hover .destroy {
  display: block;
}

.btn-edit{
  /* display: none; */
  position: absolute;
  top: 0;
  right: 30px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 14px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}
</style>